<!--
 * @Author: YWY
 * @Date: 2022-02-22 16:17:42
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-06 18:23:26
-->
<template>
  <!-- 头部 -->
  <div class="header-container">
    <my-header :title="title"></my-header>
    <!-- 标签栏 -->
    <div class="nav_tabs_container">
      <van-tabs v-model:active="active" @click-tab="onclickTab">
        <van-tab title="首页" :name="0"> </van-tab>
        <van-tab
          v-for="item in section.sectionList"
          :title="item.partition_name"
          :key="item.id"
          :name="item.id"
        >
        </van-tab>
      </van-tabs>
    </div>
  </div>

  <!-- 文章列表 -->
  <div class="articleList-container">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <div class="blank_fill"></div>
      <post-cell
        v-for="item in section.articleList"
        :key="item.id"
        :title="item.title"
        :author="item.user_name"
        :postTime="item.postTime"
        :likes="item.likes"
        :replies="item.comments"
        :visits="item.visits"
        :createdAt="item.createdAt"
        :updatedAt="item.updatedAt"
        :content="item.summary"
        :cover="item.cover_url"
        @click="toAritclePage(item.id)"
      ></post-cell>
    </van-list>
  </div>
</template>

<script>
import PostCell from "@/components/PostCell.vue";
import { defineComponent, onBeforeUpdate, ref } from "@vue/runtime-core";
import { sectionStore } from "@/store/section.js";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";

export default defineComponent({
  name: "Section",
  props: {
    id: {
      default: 1,
    },
    title: {
      default: "首页",
      type: String,
    },
  },

  setup(props) {
    const section = sectionStore();
    const router = useRouter();
    const active = ref(parseInt(props.id));
    const { finished } = storeToRefs(section);
    const loading = ref(false);

    const toRefresh = () => {
      location.reload();
    };

    const toAritclePage = (val) => {
      console.log("去文章详情页");
      router.push({ path: `/article/${val}` });
    };

    //获取板块列表
    section.loadSectionList();

    //初始化本板块文章列表
    section.initData(parseInt(props.id));

    // 标签栏板块切换跳转
    let limit = null;
    const onclickTab = (e) => {
      clearTimeout(limit);
      limit = setTimeout(() => {
        if (e.name === 0) {
          router.push({ path: "/home" });
        } else {
          let result = section.sectionList.find((item) => item.id === e.name);
          // console.log(e.name);
          router.push({
            path: `/section/${e.name}/${result.partition_name}`,
          });
          section.initData(e.name);
        }
      }, 500);
    };

    //上拉获取更多文章
    const onLoad = () => {
      section.loadArticleList(parseInt(props.id));
      loading.value = false;
    };

    //解决初次加载自动跳转到第一个标签问题
    onBeforeUpdate(() => {
      active.value = parseInt(props.id);
    });

    return {
      active,
      section,
      loading,
      toRefresh,
      onclickTab,
      toAritclePage,
      onLoad,
      finished,
    };
  },

  components: {
    PostCell,
  },
});
</script>

<style lang='less'>
#action {
  position: fixed;
  right: 6px;
  bottom: 10px;
  div {
    background-color: rgb(216, 216, 216);
    margin-bottom: 10px;
  }
}
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
}
.nav_tabs_container {
  box-shadow: 0 0 2px 0px gray;
}
.articleList-container {
  position: relative;
  top: 90px;
  z-index: 1;
}
</style>